<!DOCTYPE html>
<html lang='en'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<head>
	<title>Defy AD demo</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.body {
			max-width: 980px;
			margin: 0 auto;
			background: #ccc;
		}

		header {
			height: 200px;
			background: blue;
		}

		section {
			height: 2000px;
		}

		footer {
			height: 120px;
			background: green;
		}

		iframe {
			margin: 100px auto;
			display: block;
		}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<style>
		* {
			padding: 0;
			margin: 0;
		}

		body {
			width: 728px;
			height: 90px;
			background: #0f79b9;
		}

		#link {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			z-index: 999;
			cursor: pointer;
		}

		#logo {
			position: absolute;
			left: 60px;
			top: 4px;
			z-index: 99;
		}

		#bg-white {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			z-index: 90;
			background: url(bg-white.png) left top repeat-x;
		}

		#bg-blue {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background: url(bg-blue.png) left top repeat-x;
			opacity: 0;
		}

		#texts {
			position: absolute;
			width: 220px;
			top: 0;
			left: 220px;
			z-index: 91;
			height: 90px;
			overflow: hidden;
		}

		#texts > div {
			position: absolute;
			text-align: center;
			left: 0;
			width: 100%;
			bottom: 18px;

			
			/*
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			-moz-align-items: center;
			align-items: center;
			*/
		}

		#text-2 {
			
			opacity: 0;
		}

		#texts #text-4 {
			bottom: 0;
		}

		#texts img {
			display: block;
			margin: 0 auto;
		}

		#tiger {
			position: absolute;
			width: 162px;
			right: 60px;
			top: 0;
			height: 90px;
		}

		#tony {
			position: absolute;
			top: -25px;
			left: 0;
		}

		#food {
			position: absolute;
			z-index: 3;
			bottom: -10px;
			left: 0;
		}

		.eye-edges {
			width: 96px;
			height: 56px;
			background-position: -2px -274px;
			background-size: 822px 342px;
			overflow: hidden;
			background-repeat: no-repeat;
			background-image: url(eye.png);
			position: absolute;
			left: 34px;
			top: -5px;
			z-index: 11;
			transform: scale(.525);
			-webkit-transform: scale(.525);
		}

		.eyelids {
			position: absolute;
			left: 35px;
			top: 0px;
			width: 91px;
			height: 42px;
			overflow: hidden;
			z-index: 10;
			transform: scale(.525);
			-webkit-transform: scale(.525);
		}

		.eyelids-upper {
			background-image: url(eye.png);
			background-repeat: no-repeat;
			width: 90px;
			height: 40px;
			background-position: -198px -274px;
			background-size: 822px 342px;
			position: absolute;
			left: 0;
			top: 0;
		}

		.eyelids-lower {
			background-image: url(eye.png);
			top: 24px;
			left: 0;
			width: 90px;
			height: 24px;
			background-position: -322px -208px;
			background-size: 822px 342px;
			background-repeat: no-repeat;
			position: absolute;
		}

		#smell {
			position: absolute;
			z-index: 12;
			left: 22px;
			top: 16px;
			height: 93px;
			overflow: hidden;
			width: 0px;
			opacity: 0;
		}

		#smell img {
			display: block;
			position: absolute;
			left: 0;
			top: 0;
		}

		#box {
			position: absolute;
			right: 90px;
			bottom: 0;
			z-index: 99;
			opacity: 0;
		}
</style>
</head>

<body>
	<script>
		window.loadBillboardInSlot = '#test'
	</script>
	<!--script src="./dist/template.js"></script-->


	<div class="body">
		<div id="test"></div>
	</div>
	<div id="body" style="height:90px;">
		<a href="http://break.com" id="link" target="_blank"></a>
		<div id="bg-blue"></div>
		<div id="bg-white"></div>
		<img src="logo.png" id="logo" alt="logo">

		<div id="texts">
			<div id="text-1"><img id="text-1-img" src="text-1.png"></div>
			<div id="text-2" style="transform: translateY(90px);-webkit-transform: translateY(90px);"><img id="text-2-img" src="text-2.png"></div>
			<div id="text-3" style="transform: translateY(90px);-webkit-transform: translateY(90px);"><img id="text-3-img" src="text-3.png"></div>
			<div id="text-4" style="transform: translateY(90px);-webkit-transform: translateY(90px);"><img id="try-img" src="text-try.png"><img id="text-4-img" src="text-4.png"></div>
		</div>

		<div id="tiger">
			<div class="eye-edges"></div>
			<div class="eyelids">
				<div id="eyelids-upper" class="eyelids-upper" style="transform: translateY(-30px);-webkit-transform: translateY(-30px);"></div>
				<div id="eyelids-lower" class="eyelids-lower" style="transform: translateY(5px);-webkit-transform: translateY(5px);"></div>
			</div>
			<div id="smell" style="transform: scale(.5);-webkit-transform: scale(.5);"><img src="smell.png"></div>
			<img id="tony" src="tony.png">
			<img id="food" src="food.png">
			<img id="box" src="box.png" style="transform: scale(2);-webkit-transform: scale(2);">
		</div>

		
	</div>


	<script>
		var timeline = anime.timeline()
			, reset = anime.timeline()
			, offsetTime = 1150
			, durationTime = 525
			, once = false

		timeline
			// Text
			.add({
				targets: '#text-1',
				translateY: -90,
				opacity: 0,
				easing: 'easeOutExpo',
				duration: durationTime,
				offset: offsetTime
			})

			.add({
				targets: '#text-2',
				translateY: [
					{ value: 0, duration: durationTime, delay: 0},
					{ value: -90, duration: durationTime, delay: offsetTime * 2 }
				],
				opacity: [
					{ value: 1, duration: durationTime, delay: 0},
					{ value: 0, duration: durationTime, delay: offsetTime * 2 }
				],
				easing: 'easeOutExpo',
				duration: durationTime,
				offset: offsetTime
			})

			
			.add({
				targets: '#text-3',
				translateY: [
					{ value: 0, duration: durationTime, delay: 0},
					{ value: -90, duration: durationTime, delay: offsetTime }
				],
				opacity: [
					{ value: 1, duration: durationTime, delay: 0},
					{ value: 0, duration: durationTime, delay: offsetTime }
				],
				easing: 'easeOutExpo',
				duration: durationTime,
				offset: ((offsetTime * 3) + durationTime)
			})

			
			.add({
				targets: '#text-4',
				translateY: [
					{ value: 0, duration: durationTime, delay: 0}
				],
				opacity: [
					{ value: 1, duration: durationTime, delay: 0}
				],
				easing: 'easeOutExpo',
				duration: durationTime,
				offset: ((offsetTime * 4) + (durationTime * 2))
			})

			.add({
				targets: '#try-img',
				scale: [
					{ value: 1.35},
					{ value: 1},
				],
				easing: 'easeOutBack',
				duration: 300,
				offset: ((offsetTime * 4) + (durationTime * 4))
			})

			
			// Tiger
			.add({
				targets: '#tiger',
				translateY: [
					{ value: -10, duration: (offsetTime * 2), delay: 0},
					{ value: 20, duration: offsetTime, delay: (offsetTime * 3)}
				],
				scale: [
					{ value: 1, duration: (offsetTime * 2), delay: 0},
					{ value: .5, duration: offsetTime, delay: (offsetTime * 3)}
				],
				opacity: [
					{ value: 1, duration: (offsetTime * 2), delay: 0},
					{ value: 0, duration: offsetTime, delay: (offsetTime * 3)}
				],
				easing: 'easeOutExpo',
				duration: offsetTime,
				offset: 0
			})
			
			.add({
				targets: '#box',
				scale: 1,
				opacity: 1,
				easing: 'easeOutExpo',
				duration: offsetTime,
				offset: offsetTime * 5
			})

			.add({
				targets: '#bg-white',
				opacity: 0,
				easing: 'easeOutExpo',
				duration: offsetTime,
				offset: offsetTime * 5
			})

			.add({
				targets: '#bg-blue',
				opacity: 1,
				easing: 'easeOutExpo',
				duration: offsetTime,
				offset: offsetTime * 5
			})

			.add({
				targets: '#smell',
				scale: [
					{ value: 1, duration: (offsetTime * 2), delay: 0},
					{ value: 2, duration: (offsetTime * 2), delay: 100}
				],
				opacity: [
					{ value: 1, duration: (offsetTime * 2), delay: 0},
					{ value: 0, duration: (offsetTime * 2), delay: 100}
				],
				width: [
					{ value: 127, duration: (offsetTime * 2), delay: 0}
				],
				easing: 'easeOutExpo',
				duration: durationTime,
				offset: offsetTime
			})


			.add({
				targets: '#eyelids-upper',
				translateY: [
					{ value: -1, duration: (offsetTime * 2), delay: 0},
					{ value: -30, duration: (offsetTime * 2), delay: 100}
				],
				easing: 'easeOutExpo',
				duration: (offsetTime * .75),
				offset: offsetTime
			})

			.add({
				targets: '#eyelids-lower',
				translateY: [
					{ value: 0, duration: durationTime, delay: (offsetTime/2)},
					{ value: 5, duration: durationTime, delay: offsetTime + 100}
				],
				easing: 'easeOutExpo',
				duration: durationTime,
				offset: offsetTime
			})

			.add({
				targets: '#food',
				translateY: [
					{ value: 12, duration: (offsetTime * 2), delay: 100}
				],
				easing: 'easeOutExpo',
				duration: (offsetTime * .75),
				offset: offsetTime * 3
			})

			.update = function(anim) {
				// console.log('begins in ' + anim.currentTime + 'ms')

				if (anim.completed) {
					// console.log('completed')
					
					if (!once) restart()
				}
			}

			function restart() {
				once = true

				reset
					.add({
						targets: '#box',
						scale: 2,
						opacity: 0,
						easing: 'easeOutExpo',
						duration: offsetTime,
						offset: offsetTime
					})

					.add({
						targets: '#bg-white',
						opacity: 1,
						easing: 'easeOutExpo',
						duration: offsetTime,
						offset: offsetTime
					})

					.add({
						targets: '#food',
						translateY: 0,
						easing: 'easeOutExpo',
						duration: offsetTime,
						offset: offsetTime
					})

					.add({
						targets: '#bg-blue',
						opacity: 0,
						easing: 'easeOutExpo',
						duration: offsetTime,
						offset: offsetTime
					})

					.add({
						targets: '#tiger',
						translateY: 0,
						scale: 1,
						opacity: 1,
						easing: 'easeOutExpo',
						duration: offsetTime,
						offset: offsetTime
					})

					.add({
						targets: '#text-1',
						translateY: 0,
						opacity: 1,
						easing: 'easeOutExpo',
						duration: durationTime,
						offset: offsetTime + durationTime
					})
					
					.add({
						targets: '#text-4',
						translateY: 90,
						opacity: 1,
						easing: 'easeOutExpo',
						duration: durationTime,
						offset: offsetTime
					})


					.update = function(anim) {
						if (anim.completed) {
							setTimeout(function() {
								timeline.restart()
							}, 500);
						}
					}
				
			}
	</script>
</body>

</html>